<template>
  <!-- 审批转办 -->
  <div class="approve">
    <!-- 公共头部标题 -->
    <div class="common-title">
      <div>
        <em></em>
        <span>审批转办</span>
      </div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">纪检监察信息化平台</el-breadcrumb-item>
        <el-breadcrumb-item>审批转办</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 转办列表 -->
    <div class="records-main">
      <!-- 检举记录 -->
      <div
        class="records-item"
        v-for="item in listData"
        :key="item.id"
      >
        <!-- 信息 左 -->
        <div class="records-info">
          <div>
            <div>
              <span>举报人电话：</span>
              <span>{{item.person.phone}}</span>
            </div>
            <div>
              <span>举报人姓名：</span>
              <span>{{item.person.name}}</span>
            </div>
            <div>
              <span>举报人单位：</span>
              <span>{{item.person.company}}</span>
            </div>
          </div>
          <b></b>
          <div class="line"></div>
          <b></b>
          <div>
            <div>
              <span>被举报人姓名：</span>
              <span>{{item.accuse.name}}</span>
            </div>
            <div>
              <span>被举报人单位：</span>
              <span>{{item.accuse.company}}</span>
            </div>
            <div>
              <span>被举报人职务：</span>
              <span>{{item.accuse.job}}</span>
            </div>
          </div>
          <div>
            <div>
              <span>时间：</span>
              <span>{{item.accuse.time}}</span>
            </div>
            <div>
              <span>举报类型：</span>
              <span>{{item.accuse.type}}</span>
            </div>
            <div>
              <span>举报内容：</span>
              <span>{{item.accuse.info}}</span>
            </div>
          </div>
        </div>
        <!-- 操作 -->
        <div class="operate">
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top"
            :open-delay="500"
          >
            <i
              class="el-icon-edit"
              @click="editCur(item)"
            ></i>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top"
            :open-delay="500"
          >
            <i
              class="el-icon-delete-solid"
              @click="delCur(item)"
            ></i>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          id: 1,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 12:12:12',
          },
        },
        {
          id: 2,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 11:12:12',
          },
        },
        {
          id: 3,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 10:12:12',
          },
        },
        {
          id: 4,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 12:12:12',
          },
        },
        {
          id: 5,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 11:12:12',
          },
        },
        {
          id: 6,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 10:12:12',
          },
        },
        {
          id: 7,
          status: 'wait', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '待处理', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13131313131, // 联系方式
            name: '小明', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '后勤部', // 单位
            job: '后勤主任', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 12:12:12',
          },
        },
        {
          id: 8,
          status: 'doing', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '处理中', // 检举状态文字
          // 举报人信息
          person: {
            phone: 13331313131, // 联系方式
            name: '小红', // 姓名
            company: '廉政公署', // 单位
          },
          accuse: {
            name: '小美', // 姓名
            company: '人事部', // 单位
            job: '人事部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 11:12:12',
          },
        },
        {
          id: 9,
          status: 'done', // wait,doing,done 检举状态 分别表示 待处理 处理中 已完成
          statusTxt: '已完成', // 检举状态文字
          // 举报人信息
          person: {
            phone: 15121211212, // 联系方式
            name: '无', // 姓名
            company: '无', // 单位
          },
          accuse: {
            name: '小刚', // 姓名
            company: '财务部', // 单位
            job: '财务部长', // 职务
            type: '检举控告类',
            info: '举报内容',
            time: '2021-12-12 10:12:12',
          },
        },
      ], // 检举列表数据
    }
  },
  methods: {
    // 编辑当前审批
    editCur(item) {
      this.$router.push('/accuse/accuseedit')
    },
    // 删除当前审批
    delCur(item) {
      this.$confirm('此操作将永久删除该审批信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listData.map((cur, index, arr) => {
          if (cur.id === item.id) {
            return arr.splice(index, 1)
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped lang="less">
.approve {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .records-main {
    width: 100%;
    flex: 1;
    height: 0;
    overflow: auto;
    padding: 0 15px;
    box-sizing: border-box;
    .records-item {
      width: 100%;
      border-radius: 5px;
      height: 80px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 20px;
      box-shadow: 0px 1px 4px 0px rgba(0, 59, 129, 0.15);
      display: flex;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      justify-content: space-between;
      &:hover {
        box-shadow: 0px 6px 6px 0px rgba(0, 59, 129, 0.15);
      }
      // 状态
      .records-status {
        border-radius: 3px;
        font-size: 14px;
        padding: 0 5px;
        box-sizing: border-box;
        margin-right: 10px;
        white-space: nowrap;
      }
      // 待处理颜色
      .wait {
        border: 1px solid #c91425;
        color: #c91425;
      }
      // 处理中颜色
      .doing {
        border: 1px solid #ff8741;
        color: #ff8741;
      }
      // 已完成颜色
      .done {
        border: 1px solid #1ebda7;
        color: #1ebda7;
      }
      // 信息
      .records-info {
        flex: 1;
        display: flex;
        align-items: center;
        padding-right: 10px;
        box-sizing: border-box;
        > div {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 10px;
          > div {
            font-size: 14px;
          }
        }
        b {
          width: 10px;
          height: 10px;
          border: 2px solid #dddddd;
          border-radius: 50%;
        }
        .line {
          flex: 1;
          flex-direction: row;
          border: 1px dashed #dddddd;
        }
      }
    }
  }
}
</style>
